<template>
    <div class="main">
        <div class="main-left content">
            <el-carousel height="500px">
                <el-carousel-item >
                    <img src="@/assets/login/1.png" class="carousel-img">
                </el-carousel-item>
                <el-carousel-item >
                    <img src="@/assets/login/2.png" class="carousel-img">
                </el-carousel-item>
                <el-carousel-item >
                    <img src="@/assets/login/3.png" class="carousel-img">
                </el-carousel-item>
                <el-carousel-item >
                    <img src="@/assets/login/4.png" class="carousel-img">
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="main-right content">
            <div style="height: 60px;">
                <img  style="height: 60px; margin-top: 15px;" src="@/assets/logo.png" alt="">
            </div>
            <el-form :model="loginForm" ref="loginForm" :inline="true">
                <h2 class="head">忘记密码？</h2>
                <el-form-item prop="account" label="账 号：" class="frm">
                    <el-input class="ipt" v-model="loginForm.account" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="邮 箱：" prop="userEmail" class="frm">
                    <el-input class="ipt"  v-model="loginForm.userEmail" placeholder="请输入邮箱"></el-input>
                </el-form-item>
                <el-form-item label="验证码：" prop="vailCode" class="frm">
                    <el-input style="width: 160px;"  v-model="loginForm.vailCode" placeholder="请输入验证码"></el-input>
                    <el-button @click="sendMsg" style="height: 40px; width: 75px;margin-left: 10px;" type="primary" :disabled="flag">{{message}}</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPass" style="width: 150px; height: 40px;">重置密码</el-button>
                </el-form-item>
            </el-form>
            <div style="margin-top: 60px;">
                <span style="font-size: 12px; margin-left: 250px;">
                    <router-link :to="{name:'Login'}">前往登录</router-link>
                </span>
            </div>
        </div>
    </div>
</template>

<script>
import { getValidCode ,resetPass} from '@/api/user/user';
export default {
    name:'RetriveAccount',
    data(){
        return{
            loginForm:{
                account:'',
                userEmail:'',
                vailCode:'',
            },
            flag:false,
            message:'发送验证码'
        }
    },
    methods:{
        // 发送短信
        sendMsg(){
            // 这边进行验证码发送
            this.$message.success('发送成功，请稍后');
            getValidCode(this.loginForm.userEmail).then(resp=>{
                console.log("");
            })
            this.flag = true;
            let time = 60;
            let timer = setInterval(() => {
                if(time > 0){
                    time --;
                    this.message = time+'秒后重发';
                }else{
                    this.message = '发送验证码';
                    clearInterval(timer);
                    this.flag = false;
                }
            }, 1000);
        },
        // 重置密码
        resetPass(){
            resetPass(this.loginForm).then(resp =>{
                if(resp.code == 200){
                    this.$message.success(resp.message);
                }else{
                    this.$message.error(resp.message);
                }
            })
        }
    },
    mounted(){
    }
}
</script>

<style scoped>
    *{
        margin: 0px;
        padding: 0px;
        
    }
    a{
        text-decoration: none;
    }
    .ipt{
        width: 250px;
    }
    .frm{
        margin: 15px 0px 15px;
    }
    .head{
        text-align: center;
        font-family: '楷体';
        margin-top: 30px; 
        margin-bottom: 20px;
        color: rgb(60, 10, 100) 
    }
    .carousel-img{
        height: 500px;
    }
    .main{
        background: rgba(255, 252, 255, 0.2);
        display: flex;
        justify-content: center;
        align-items: center;
        width: 70%;
        height: 500px;
        margin:40px auto;
        border: 1px solid whitesmoke;
        border-radius: 5px;
    }
    .main-left{
        width: 60%;
    }
    .main-right{
        width: 40%;
        height: 500px;
        /* background: rgba(153, 201, 82, 0.1); */
        background: rgba(238,231,202, 1);
    }
    .content{
        float: left;
    }
    .main:hover{
        transition: 1s linear;
        box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
    }
    a:hover{
        text-decoration: underline;
    }
    
</style>
